<template>
  <div class="login">
    <van-nav-bar
      title="密码登陆"
      left-arrow
      @click-left="$router.go(-1)"
      right-text="手机号登录"
      @click-right="$router.push('/phoneLogin')"
    />
    <div class="login-container">
      <div class="login-form">
        <form @submit.prevent="login">
          <div class="input-group">
            <label for="userName">用户名</label>
            <input type="text" id="userName" name="userName" v-model="userName"  required placeholder="请输入用户名" />
          </div>
          <div class="input-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" v-model="password" required placeholder="请输入密码" />
          </div>
          <button type="submit" class="btn">登录</button>
        </form>
        <button class="goRegister" @click="Register">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Toast } from 'vant'
export default {
  name: 'loginIndex',
  data () {
    return {
      userName: '', // 用户名绑定
      password: '' // 密码绑定
    }
  },
  created () {
    // 初始化逻辑可以放在这里
  },
  mounted () {
    // 可以在这里初始化一些数据或执行其他操作
    this.userName = ''
    this.password = ''
  },
  methods: {
    async login () {
      console.log('登录请求发送中...')
      const userNameRegex = /^[a-zA-Z0-9]{1,10}$/
      const passwordRegex = /^\d{8}$/
      // 检查用户名和密码是否为空
      if (!this.userName || !this.password) {
        Toast.fail('用户名和密码不能为空')
      } else if (!userNameRegex.test(this.userName)) {
        Toast.fail('用户名必须由不超过十个的字母数字组成')
      } else if (!passwordRegex.test(this.password)) {
        Toast.fail('密码必须是8位数字')
      }

      try {
        // 发送登录请求，传递用户名和密码
        const res = await request.post('/login', {
          userName: this.userName,
          password: this.password
        })
        console.log(res)
        this.$store.commit('user/setUserInfo', res) // 更新token

        if (res.status === 200) {
          console.log(res.message)
          Toast.success(res.message)
          const url = this.$route.query.redirect || '/'

          this.$router.replace(url) // 登录成功后跳转
        } else if (res.status === 404) {
          Toast.fail(res.message + '，请注册账号')
          this.$router.push('/register') // 登录失败后跳转回登陆页面
        } else {
          Toast.fail(res.message || '登录失败')
        }
      } catch (error) {
        console.log(error.message)
      }
    },
    Register () {
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>
.login-container {
  margin-top: 20px;
  padding: 0 15px;
  height: 100%;
}

.login-form {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.captcha-container {
  display: flex;
  align-items: center;
}

.captcha-container input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn {
  padding: 10px;
  background-color: #e2b912;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.btn:hover {
  background-color: #0056b3;
}
.goRegister {
  margin-top: 10px;
  width: 10%;
  font-size: 12px;
}
</style>
